<template>
  <div class="spacedetail_container">
    <div class="spacedetail_box" v-if="infolist">
        <nav class="navlist">
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/business/officespace?typeid=1' }" class="tag">租赁指南</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/home/business/financing?typeid=4'}" class="tag">品牌专区</el-breadcrumb-item>
            <el-breadcrumb-item class="tag">{{navtitle}}</el-breadcrumb-item>
            </el-breadcrumb>
        </nav>

        <div class="spacedetail_box_detail">
            <div class="spacedetail_box_left">
              <h2 class="title">{{navtitle}}</h2>
              <p class="date">发布时间:{{navdate | formatDate}}</p>
              <div class="acticel_box">
                <img :src="head_pic" alt class="spacedetail_img">
                <p v-html="navcontent"></p>
              </div>
            <!-- 留言列表 -->
            <!-- <div class="message_box">
              <el-collapse v-model="activeNames" @change="handleChange" >
                <el-collapse-item :title="messagelength" name="1" >
                    <ul class="message_list">
                      <li v-for="(item,index) in infolist.messagelist" :key="index">
                          <span class="name">{{item.user_name}}:</span>
                          <span class="message">{{item.content}}</span>
                          <span class="date">{{item.created_at | formatDate}}</span>
                          <div style="clear:both;"></div>
                      </li>
                    </ul>
                </el-collapse-item>
              </el-collapse>
            </div>

            <div class="edit_box">
                <el-input type="textarea" id="comment" :rows="3" placeholder="请输入内容" v-model="textarea" resize="none" maxlength="100"></el-input>
                <el-button type="warning" class="btn_commit" @click="Addmessage">留言</el-button>
                <div style="clear:both;"></div>
            </div> -->

            <div class="articel_box">
                <h2 class="articel_box_title">相关文章</h2>
                <ul class="articel_list">
                  <li v-for="(item,index) in infolist.articlelist" :key="index" @click="fetchrelation(item.article_id)">
                    <img :src="item.head_pic" alt="" class="articel_list_img">
                    <p class="articel_list_text">{{item.title}}</p>
                  </li>
                  <div style="clear:both;"></div>
                </ul>
            </div>

            <!-- <div class="articel_container">
              <p class="pretext" @click="fetchbeforearticeldetail">上一篇 {{infolist.preacticel}}</p>
              <p class="nexttext" @click="fetchnextarticeldetail">下一篇 {{infolist.nextarticel}}</p>
            </div> -->

        </div>

        <div class="spacedetail_box_right">
            <div class="newarticel">
                <h2 class="title">最新文章</h2>
                <ul class="articellist">
                  <li v-for="(item,index) in infolist.newarticellist" :key="index" @click="fetchnewarticeldetail(item.article_id)">
                    {{item.title}}
                  </li>
                </ul>
            </div>
            <!-- <div class="input_box">
                <el-input placeholder="找办公空间" prefix-icon="el-icon-search" v-model="searchInput" class="seachinput"></el-input>
            </div> -->

            <div class="consult_box">
                <h2 class="title">在线咨询</h2>
                <ul class="consullist">
                   <li>
                       <img src="../../../../assets/img/phone.png" alt="" class="consultimg">
                       <span class="text">4008822692</span>
                    </li>
                </ul>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { getarticledetail, getarticlmessage, Addarticlemessage, Searchkeyword } from "@/api/business"
export default {
  metaInfo(){
    return{
      title: this.navtitle,
      meta: [
       {
        name: "keywords",
        content:this.keywords,
      },
      {
        name:'description',
        content:this.navcontent,
      }
     ]
    }
  },
  name: "SpaceDetail",
  data() {
    return {
      articleId:this.$route.params.id,
      typeid:this.$route.params.typeid,
      navtitle:'',
      navdate:'',
      head_pic:'',
      navcontent:'',
      keywords:'',
      infolist: {
        messagelist: [],
        articlelist:[],
        preacticel:'',
        nextarticel:'',
        newarticellist:[]
      },
      activeNames: ["1"],
      messagelength: "",
      emojilist: [],
      searchInput:'',
      nextid:'',
      beforeid:'',
      textarea:'',
    };
  },
  created(){
    this.$root.goIndex=2
  },
  methods: {
    handleChange(val) {},
    fetcharticeldetail(){
        var reqParams = {
            articleId:this.articleId
        }
        getarticledetail(reqParams).then((res)=>{
          if(res.data.code == 0){
            this.navtitle = res.data.data.title;
            this.navdate = res.data.data.created_time;
            this.head_pic = res.data.data.head_pic;
            this.navcontent = res.data.data.content;
            this.keywords = res.data.data.keywords;
          }else{
            this.$message.error(res.data.msg )
          }        
        })
        .catch((error)=>{
            this.$message.error('查询文章详情失败！请重试！')
        })
    },

    fetcharticelrelation(){
      let reqParams = {
        articleId:this.articleId,
        typeId:this.typeid,
      }
      getarticlmessage(reqParams).then((res)=>{
        if(res.data.code == 0){
          this.infolist.newarticellist = res.data.data.newest_articles;
          this.infolist.messagelist = res.data.data.message_board_info.message_info;
          this.infolist.articlelist = res.data.data.relate_article_info;
          this.infolist.preacticel = res.data.data.before_one_article.title;
          this.infolist.nextarticel = res.data.data.after_one_article.title;
          this.nextid = res.data.data.after_one_article.article_id;
          this.beforeid = res.data.data.before_one_article.article_id;
          this.messagelength = "留言(" + res.data.data.message_board_info.message_info.length + ")";
        }else{
          this.$message.error(res.data.msg )
        } 
      })
      .catch((error)=>{
      })
    },

    fetchrelation(params){
      var reaparams = {
        articleId:params
      }
      getarticledetail(reaparams).then((res)=>{
        if(res.data.code == 0){
          this.navtitle = res.data.data.title;
          this.navdate = res.data.data.created_time;
          this.head_pic = res.data.data.head_pic;
          this.navcontent = res.data.data.content;
        }else{
          this.$message.error(res.data.msg )
        } 
        this.$router.replace({path:'/home/business/financing/financingdetail/'+'4'+'/'+params})
      })
      .catch((error)=>{
        this.$message.error('查询文章详情失败！请重试！')
      })
    },

    fetchbeforearticeldetail(){
      var reqParams = {
        articleId:this.beforeid
      }
      getarticledetail(reqParams).then((res)=>{
        if(res.data.code == 0){
          this.navtitle = res.data.data.title;
          this.navdate = res.data.data.created_time;
          this.head_pic = res.data.data.head_pic;
          this.navcontent = res.data.data.content;
        }
        this.$router.replace({path:'/home/business/financing/financingdetail/'+'4'+'/'+this.beforeid})
      })
      .catch((error)=>{
        this.$message.error('查询文章详情失败！请重试！')
      })
    },

    fetchnextarticeldetail(){
      var reqParams = {
        articleId:this.nextid
      }
      getarticledetail(reqParams).then(res=>{
        if(res.data.code == 0){
          this.navtitle = res.data.data.title;
          this.navdate = res.data.data.created_time;
          this.head_pic = res.data.data.head_pic;
          this.navcontent = res.data.data.content;
        }
        this.$router.replace({path:'/home/business/financing/financingdetail/'+'4'+'/'+this.nextid})
      })
      .catch(error=>{
        this.$message.error('查询文章详情失败！请重试！')
      })
    },
    
    fetchnewarticeldetail(params){ // 最新文章
      this.articleId = params;
      var reqParams = {
        articleId:this.articleId
      }
      getarticledetail(reqParams).then((res)=>{
        if(res.data.code == 0){
          this.navtitle = res.data.data.title;
          this.navdate = res.data.data.created_time;
          this.head_pic = res.data.data.head_pic;
          this.navcontent = res.data.data.content;
          this.keywords = res.data.data.keywords;
          this.$router.replace({path:'/home/business/financing/financingdetail/'+'4'+'/'+this.articleId})
        }else{
          this.$message.error(res.data.msg )
        }
      })
      .catch((error)=>{
        // this.$message.error('查询文章详情失败！请重试！')
      })
    },

    Addmessage(){
      if(!window.localStorage.getItem('token')){
        this.$message.error('请先登录！');
        return
      }
      var reaparams = {
        articleId: this.articleId,
        content:this.textarea,
        token:window.localStorage.getItem('token')
      }
      Addarticlemessage(reaparams).then((res)=>{
        if(res.data.code == 0){
          this.$message.success('发表留言成功！');
          this.textarea = '';
          setTimeout(() => {
            this.fetcharticelrelation();
          },500);
        }else{
          this.$message.error(res.data.msg )
        }
      })
    }
  },
  mounted() {
    this.fetcharticeldetail();
    this.fetcharticelrelation();
  }
};
</script>
<style lang="scss" scoped>
@import "../../../../style/common.scss";
@import "./financingdetail.scss";
</style>
